<template>
  <el-form
    :model="reportTrafficFormAdmin"
    label-width="80px"
    :rules="rulesAdmin"
    ref="formRef"
  >
    <el-form-item label="事件编号" prop="事件编号">
      <!-- 自动编号，不用填写 -->
      <el-input v-model="reportTrafficFormAdmin.事件编号" disabled></el-input>
    </el-form-item>
    <el-form-item label="事件类型" prop="事件类型">
      <el-select v-model="reportTrafficFormAdmin.事件类型">
        <el-option label="碰撞" value="碰撞"></el-option>
        <el-option label="刮蹭" value="刮蹭"></el-option>
        <el-option label="碾压" value="碾压"></el-option>
        <el-option label="翻车" value="翻车"></el-option>
        <el-option label="超车" value="超车"></el-option>
        <el-option label="失火" value="失火"></el-option>
        <el-option label="其他" value="其他"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="事件等级" prop="事件等级">
      <el-input v-model.number="reportTrafficFormAdmin.事件等级"></el-input>
    </el-form-item>
    <el-form-item label="发生时间" prop="发生时间">
      <el-date-picker
        v-model="reportTrafficFormAdmin.发生时间"
        type="datetime"
        placeholder="选择日期时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        style="width: 100%"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="事件地址" prop="事件地址">
      <el-input v-model="reportTrafficFormAdmin.事件地址"></el-input>
    </el-form-item>
    <el-form-item label="车牌号" prop="车牌号">
      <el-input v-model="reportTrafficFormAdmin.车牌号"></el-input>
    </el-form-item>
    <el-form-item label="驾驶员" prop="驾驶员">
      <el-input v-model="reportTrafficFormAdmin.驾驶员"></el-input>
    </el-form-item>
    <el-form-item label="处理状态" prop="处理状态">
      <el-select v-model="reportTrafficFormAdmin.处理状态">
        <el-option label="未处理" value="0"></el-option>
        <el-option label="处理中" value="1"></el-option>
        <el-option label="已处理" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div class="button-group">
    <el-button @click="closeForm">取消</el-button>
    <el-button type="primary" @click="submitForm">确定</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { userData } from '../stores/userData.js';
const { localhostUrl } = storeToRefs(userData());
const emit = defineEmits(['close-form']);
const props = defineProps({
  coordinates: {
    type: Array,
  },
  docLayer: {
    type: Object,
  },
});
const formRef = ref(null);
//这是管理员的报告路况表单,事件编号，事件类型，事件等级，发生时间，发生地点，车牌号，驾驶员，处理状态
const reportTrafficFormAdmin = ref({
  事件编号: 'JS' + new Date().getTime(),
  事件类型: '',
  事件等级: null,
  发生时间: '',
  事件地址: '',
  车牌号: '',
  驾驶员: '',
  处理状态: null,
});
//这是管理员报告路况的表单验证

//事件等级验证的方法，只能是数字1，2，3，4
//判断是否是数字
const isNumber = (value) => {
  return /^\d+$/.test(value);
};
const gradeValidator = (rule, value, callback) => {
  if (!isNumber(value)) {
    callback(new Error('事件等级只能是1，2，3，4'));
  } else if (value < 1 || value > 4) {
    callback(new Error('事件等级只能是1，2，3，4'));
  } else {
    callback();
  }
};

const rulesAdmin = ref({
  事件类型: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
  事件等级: [
    { required: true, message: '请选择事件等级', trigger: 'change' },
    { validator: gradeValidator, trigger: 'change' },
  ],
  发生时间: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
  事件地址: [{ required: true, message: '请输入事件地址', trigger: 'blur' }],
  车牌号: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
  驾驶员: [{ required: true, message: '请输入驾驶员', trigger: 'blur' }],
  处理状态: [{ required: true, message: '请选择处理状态', trigger: 'change' }],
});

const closeForm = () => {
  emit('close-form');
};

function addPoint(point, docLayer, events, id) {
  //1.构建点要素的几何体信息
  const gPoint = new Zondy.Object.GPoint(point[0], point[1]);
  const fGeom = new Zondy.Object.FeatureGeometry({
    PntGeom: [gPoint],
  });
  //2.设置样式信息
  let color = '';
  if (events.处理状态 === '0') {
    color = '6';
  } else if (events.处理状态 === '1') {
    color = '4';
  } else {
    color = '90';
  }
  const pointInfo = new Zondy.Object.CPointInfo({
    //子图角度，取值范围为0~360。
    Angle: 0,
    //子图颜色（请参考MapGIS颜色库中颜色编号）
    Color: color,
    //子图高度
    SymHeight: 5,
    //子图ID（请参考MapGIS符号库中线符号编号）
    SymID: 21,
    //子图宽度
    SymWidth: 5,
  });
  //3.设置当前要素的图形参数信息
  const webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
    InfoType: 1, //1=>point 2=>line 3=>aarea
    PntInfo: pointInfo,
  });
  //4.设置要素的自定义属性
  var attValue = [
    events.事件编号,
    events.事件类型,
    events.事件等级,
    events.发生时间,
    events.事件地址,
    events.车牌号,
    events.驾驶员,
    events.处理状态,
  ];

  //5.创建一个要素
  const feature = new Zondy.Object.Feature({
    fGeom: fGeom,
    GraphicInfo: webGraphicInfo,
    AttValue: attValue,
  });
  //6.设置要素为点要素
  feature.setFType(1);
  //7.创建一个要素数据集
  const featureSet = new Zondy.Object.FeatureSet();
  //8.设置属性结构，根据图层属性进行设置
  const cAttStruct = new Zondy.Object.CAttStruct({
    FldName: [
      '事件编号',
      '事件类型',
      '事件等级',
      '发生时间',
      '发生地点',
      '车牌号',
      '驾驶员',
      '处理状态',
    ],
    FldNumber: 8,
    FldType: [
      'string',
      'string',
      'short',
      'string',
      'string',
      'string',
      'string',
      'short',
    ],
  });
  featureSet.AttStruct = cAttStruct;
  featureSet.addFeature(feature);
  //调用接口服务 将数据同步到数据库
  // 第一个参数表示服务名称 第二个参数表示当前要素所在图层的索引值
  const addService = new Zondy.Service.EditDocFeature(
    localhostUrl.value.map,
    id,
    {
      ip: localhostUrl.value.ip,
      port: localhostUrl.value.port,
    }
  );
  addService.add(featureSet, (data) => {
    onAddPntSuccess(data, docLayer);
  });
  function onAddPntSuccess(data, layer) {
    console.log(11111);
    console.log(data);
    if (data) {
      ElMessage.success('添加成功');
      //刷新图层
      layer.refresh();
      //关闭表单
      closeForm();
    } else {
      ElMessage.error('添加失败');
    }
  }
}

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      //将表单数据给event对象
      addPoint(
        props.coordinates,
        props.docLayer,
        reportTrafficFormAdmin.value,
        3
      );
    } else {
      ElMessage.error('请填写完整信息');
      return false;
    }
  });
};
</script>

<style scoped>
.button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
</style>
